import HOCLogin from '../../utils/HOCLogin';

import React, { useState, useEffect } from 'react'

import axios from "axios";

function Message() {
  const [list, setList] = useState([]); //购物车列表数据
  const [allCheck, setAllCheck] = useState(false); //全选，默认为false
  let [totalPrice, setTotalPrice] = useState(0); //总价  注意：要写成let
  let [totalNum, setTotalNum] = useState(0); //总量

  //  请求数据 ---两个参数：回调函数，[]
  useEffect(() => {
    axios.get("/cartList").then(res => {
      setList(res.data)
    })
  }, [])

  // 5.求总价和总量 ---求复选框被选中的
  const total = () => {
    // 总价 
    totalPrice = list.reduce((sum, item) => {
      if (item.isCheck) {
        sum += item.num * item.price
      }
      return sum
    }, 0)
    setTotalPrice(totalPrice.toFixed(2));

    // 总量 
    totalNum = list.reduce((sum, item) => {
      if (item.isCheck) {
        sum += item.num
      }
      return sum
    }, 0)

    setTotalNum(totalNum)

  }

  // 1. 数量加
  const addNum = (id) => {
    list.forEach(item => {
      if (item.id === id) {
        item.num++
      }
    })
    setList([...list])
    total()
  }

  // 2. 数量减
  const reduceNum = (id) => {
    list.forEach(item => {
      if (item.id === id) {
        item.num--
      }
    })
    setList([...list])
    total()

  }

  // 3. 全选 ---双向数据绑定
  const onAllCheck = (e) => {
    setAllCheck(e.target.checked); //先把值赋给复选框
    list.forEach(item => {
      item.isCheck = e.target.checked;
    })

    setList([...list])
    total()

  }

  // 反选 
  const onCheckItem = (id) => {
    // 选中一个或者少选一个
    list.forEach(item => {
      if (item.id === id) {
        item.isCheck = !item.isCheck
      }

    })

    let all = list.every(item => item.isCheck)
    setList([...list]);
    setAllCheck(all)
    total()
  }



  // 注意：函数传值的时候要写成箭头函数 
  return (
    <div className='shopCart'>
      {/* 1. 头部全选按钮  */}
      <div className="title">
        <input type="checkbox" checked={allCheck} onChange={onAllCheck} />全选
      </div>

      {/* 2. 中间购物车商品列表  */}
      <div className="shopList">
        {
          list.length ?
            list.map(item => {
              return <li key={item.id}>
                <input type="checkbox"
                  checked={item.isCheck}
                  onChange={() => { onCheckItem(item.id) }}
                />
                <img src={item.img} alt="" />
                <div>
                  <h4>{item.title}</h4>
                  <p>￥{item.price}元</p>
                  <div>
                    {/* 减到1，按钮禁用  */}
                    <button disabled={item.num === 1} onClick={() => { reduceNum(item.id) }}>-</button>
                    <b>{item.num}</b>
                    <button onClick={() => { addNum(item.id) }}>+</button>
                  </div>
                </div>
              </li>
            }) : "购物车暂无数据"
        }
      </div>

      {/* 3. 底部全选，总价和结算按钮 */}
      <div className="bottom">
        <input type="checkbox" checked={allCheck} onChange={onAllCheck} />
        <b>总计：{totalNum}</b>
        <button disabled={totalNum === 0}>结算{totalPrice}</button>
      </div>
    </div>
  )
}

export default HOCLogin(Message)